<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
			
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">公司信息</h2>
				<!-- 企业审核状态 0 全部 1 未审核 2 已审核 -1 已拒绝 -->
				<div v-if="company.c_status==1">
					<el-button type="success" size="small" class="lahei-btn" @click="onAddShield">认证通过</el-button>
					<el-button type="danger" size="small" class="lahei-btn2" @click="onNoAddShield">认证不通过</el-button>
				</div>
				<div class="lahei-btn" style="text-align: right;color:#999;" v-else>
					<p style="margin:2px 0;">{{company.zhuangtai}}</p>
					<p style="margin:2px 0;"  v-if="company.c_status==-1">{{company.reason}}</p>
				</div>
				
				<section class="flexed">
					<div class="lietou-msg">
						<img :src="company.new_logo=='0'?require(`@/assets/images/mine_default_img.png`):company.new_logo"  class="avatar"/>
						<div class="lietou-msg-right">
							<p>公司：{{company.new_c_name}}</p>
							<p>规模：{{company.new_guimo}}</p>
						</div>
					</div>
					<div class="lietou-number lietou-msg-right">
						<p>注册时间：{{company.create_time}}</p>
						<p>注册人： {{company.new_realname}}</p>
						<p>注册人职位： {{company.new_title}}</p>
					</div>
				</section>
			</div>
			<!-- 账户信息 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">公司简介</h2>
				<div class="acount">
					{{company.new_content}}
				</div>
			</div>
			<!-- 营业执照 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">营业执照</h2>
				<el-image :src="company.new_zhizhao"  class="company-img" :preview-src-list="company.repicList" :z-index="10000"  v-if="company.new_zhizhao!='0'"></el-image>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'CompanyExaDetail',
		components:{
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				company: {},
				detailId: ''
			}
		},
		async created() {
			this.detailId = this.$route.query.id;
			this.loadData();
		},
		methods:{
			async loadData() {
			  const loading = this.$loading({
				 lock: true,
				 text: 'Loading',
				 spinner: 'el-icon-loading',
				 background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
				let data = {
				   "token": this.token,
				   "id": this.detailId
				 }
				 let res = await this.$http({
				   url: '/man/Company/getInfo',
				   method: 'post',
				   params: data
				 });
				 if(res.data.new_guimo.indexOf('人')==-1){
					 res.data.new_guimo = res.data.new_guimo +'人';
				 }
				 res.data.repicList = res.data.new_zhizhao.split();
				 this.company = res.data;
				 loading.close();
			  } catch (e) {
				 console.log(e)
				 loading.close();
			  }
			},
			// 审核通过
			onAddShield(){
				this.$confirm('是否确认审核通过?', '操作确认', {
					 confirmButtonText: '确定',
					 cancelButtonText: '取消',
					 type: 'warning'
				}).then(() => {
					this.shenheHandle(2, '');
				})
			},
			// 审核不通过
			onNoAddShield(){
				this.$prompt('是否确认不通过认证？', '提示', {
					 confirmButtonText: '确定',
					 cancelButtonText: '取消',
					 inputPattern:  /\S/,
					 inputErrorMessage: '请输入审核不通过原因'
				}).then(({ value }) => {
					this.shenheHandle(-1, value);
				})
			},
			// 审核操作
			async shenheHandle(status, _reason){
				try {
					let res = await this.$http({
						url: '/man/Company/shenhe',
						method: 'post',
						params: {
							"token": this.token,
							"id": this.detailId,
							"c_status": status, //	string	是	审核状态 1 待审核 2 审核通过 -1 拒绝	-1
							"reason": _reason
						}
					});
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.loadData();
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>
<style>
	.el-message{
		top:120px !important;
	}
</style>
<style lang="scss" scoped="scoped">
	.lietou-detail{
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;
		
		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}		
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;
		
		.lietou-detail-h1{
			font-size:18px;
			font-weight: bold;
			padding:20px 16px 8px;
		}
		.lietou-number{
			border-left:1px #ddd solid;
			padding-left:30px;
		}
		.lietou-msg{
			display: flex;
			margin-left:30px;
			margin-top:12px;
			.avatar{
				width:80px;
				height:80px;
				border-radius: 50%;
			}
		}
		.lietou-msg-right{
			margin-left:34px;
			font-size:16px;
			p{
				line-height: 35px;
				margin:0;
			}
		}
		.lahei-btn{
			position: absolute;
			right:30px;
			top:25px;
		}
		.lahei-btn2{
			position: absolute;
			right:126px;
			top:25px;
		}
		.acount{
			margin:0 30px 20px;
			line-height: 32px;
			
			span{
				margin-right:50px;
			}
		}
		.company-img{
			width:200px;
			margin-left:20px;
		}
	}
</style>
<style>
	.el-message{
		top:120px !important;
	}
	.el-icon-circle-close{
		color:#ccc !important;
	}
</style>